<template>
    <div class="account-center">
        <div class="page-center">
            <a-page-header title="创作管理" @back="() => $router.back()" style="padding-left: 10px; padding-top: 0">
            </a-page-header>
            <a-card :bordered="false" style="width: 100%; border-radius: 6px">
                 <div class="box">
                    <!-- <div class="left-box">
                      <div class="tab-list">
                        <div class="tab-item" @click="tabChange(item.id)" :class="currentTab==item.id?'active-tab':''" v-for="item in tabList" :key="item.id">
                        {{item.name}}
                        </div>
                      </div>
                    </div> -->
                    <div class="right-box">
                    <a-row>
                        <a-col :span="6">
                            <a-range-picker v-model:value="time"  />
                        </a-col>
                        <a-col class="ml-10" :span="5">
                            <a-input placeholder="请输入关键字" allowClear v-model:value="searchTxt"></a-input>
                        </a-col>
                        <!-- <a-col class="ml-10" :span="5">
                            <a-input></a-input>
                        </a-col>
                        <a-col class="ml-10" :span="5">
                            <a-input></a-input>
                        </a-col> -->
                        <a-col class="ml-10" :span="1">
                            <a-button type="primary" @click="queryList">查询</a-button>
                           
                        </a-col>
                        <a-col style="margin-left: 25px;" :span="1">
                          <a-button type="primary" @click="exportData">导出</a-button>
                        </a-col>
                      
                    </a-row>    
                    <a-table
                    :dataSource="list"
                    :columns="columns"
                    :pagination="pagination"
                 
                    @change="handleTableChange"
                    rowKey="id"
                
                
                    :loading="loading"
                        >
                        <template #cover_img="{ record }">
                            <a-popover v-if="record.cover_img">
                              <template  #content>
                              <a-image-preview-group>
                                  <a-image
                                    style="cursor: pointer;"
                                    :width="50"
                                    :src="img"
                                    v-for="(img, index) in record.cover_img"
                                    :key="index"
                                  />
                              </a-image-preview-group>
                           </template>
                               <img
                                    style="width: 50px;cursor: pointer;"
                                    :src="img"
                                    v-for="(img, index) in  record.cover_img.slice(0,1)"
                                    :key="index"
                                  />
                            </a-popover>
                            <div v-else>--</div>
                        </template>
                      <template #title="{ record }">
                        <div class="ellispis">{{ record?.title }}</div>
                      </template>
                      <template #platform_account_article_log="{ record }">
                        <div>
                          {{ record.published.publishedMsg }}
                        </div>
                      </template>
                      <template #action="{ record }">
                        <a-button type="link" @click="showDetail(record)">详情</a-button>
                      </template>
                    </a-table> 
                    </div>
                 </div>
                </a-card>
        </div>
      <a-drawer
      title="详情"
      :visible="detailVisible"
      :width="800"
      @close="closeDetail"
      :destroyOnClose="true"
      :keyboard="false"
      :maskClosable="true"
    
      :wrap-style="{ position: 'absolute',right:0 }"
      :body-style="{ padding: '30px', height: 'calc( 100% - 55px )' }"
    >
    <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane :key="1" tab="作品详情">
      <a-form layout="vertical" >
        <a-form-item >
          <template #label>
            <span class="label-title">发布状态</span>
          </template>
        
          <span > {{ detail.published.publishedMsg }}</span>
          
        </a-form-item>
        <a-form-item>
          <template #label>
            <span class="label-title">标题</span>
          </template>
          {{ detail.article.title }}
        </a-form-item>
        <a-form-item>
          <template #label>
            <span class="label-title">封面</span>
          </template>
          <a-image-preview-group>
            <a-image
              style="cursor: pointer;"
              :width="100"
              :src="img"
              v-for="(img, index) in (detail.article.cover_img || [])"
              :key="index"
            />
          </a-image-preview-group>
        </a-form-item>
        
        <a-form-item >
          <template #label>
            <span class="label-title">内容</span>
          </template>
          <div v-html="detail.article.desc"></div>
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane :key="2" tab="发布详情" force-render>
      <a-table
                    :dataSource="detail.article_log"
                    :columns="airtileColumns"
                   
                 
                 
                    rowKey="id"
                
                
                    :loading="loading">
                  
                      <template #nickname="{record}">
                        {{ record.platform_account_user.nickname }}
                      </template>
                      <template #source_txt="{record}">
                        {{ record.platform_account_user.source_txt }}
                      </template>
                      <template #execute_json="{record}">
                        {{ record.execute_json?.msg?record.execute_json?.msg:'--' }}
                      </template>
                  </a-table>
                    

    </a-tab-pane>
    </a-tabs>
  
    </a-drawer>
    </div>
</template>
  
<script>
import {
    ref,
    defineComponent,
    reactive,
    toRefs,
    computed,
    watch,
    toRaw,
    h,
    onBeforeUnmount,
    createVNode,
    inject,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Form, Modal, notification, message } from "ant-design-vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import moment from "moment";

const useForm = Form.useForm;
export default defineComponent({
    name: "userSetting",
    components: {
        
    },

    setup() {
        const route = useRoute();
        const router = useRouter();

        const state = reactive({
                activeKey:1,
                total:0,
                dLoading:false,
                searchTxt:'',
                detail:{
                  article:{
                    cover_img:'',
                    desc:'',
                    title:'',
                  },
                  article_log:[],
                  published:{
                    publishedMsg:''
                  }
                },
                detailVisible:false,
                page:1,
                pageSize:10,
                time:[],
                currentTab:1,
                tabList:[
                    {id:1,name:"我的发布"},
                    // {id:2,name:"我的创作"},
                    // {id:3,name:"我的收藏"},
                ],
                loading:false,
                list:[],
                airtileColumns:[
                  {
                      title: "账号",
                      align: "center",
                      dataIndex: "nickname",
                      key: 'nickname',
                      slots: {
                        customRender: "nickname",
                      },
                  },
                  {
                      title: "平台",
                      align: "center",
                      dataIndex: "source_txt",
                      key: 'source_txt',
                      slots: {
                        customRender: "source_txt",
                      },
                  },
                  {
                      title: "发布状态",
                      align: "center",
                      dataIndex: "status_txt",
                      key: 'status_txt',
                  },
                  {
                      title: "失败原因",
                      align: "center",
                      dataIndex: "execute_json",
                      key: 'execute_json',
                      slots: {
                        customRender: "execute_json",
                      },
                  },
                ],
                columns: [
                {
                    title: "序号",
                    align: "center",
                    dataIndex: "id",
                    key: 'id',
                },
                {
                    title: "封面",
                    align: "center",
                    dataIndex: "cover_img",
                    key: 'cover_img',
                    slots: {
                    customRender: "cover_img",
                },
                },
                {
                    title: "标题",
                    align: "center",
                    dataIndex: "title",
                    width:200,
                    key: 'title',
                    slots: {
                    customRender: "title",
                },
                },
                {
                title: "创建时间",
                dataIndex: "created_at",
                
                align: "center",
                },
                {
                title: "发布状态",
                dataIndex: "platform_account_article_log",
                slots: {
                    customRender: "platform_account_article_log",
                },
                align: "center",
                },
                {
                title: "操作",
                slots: {
                    customRender: "action",
                },
               
                align: "center",
                },
            ],
        });
            const pagination = computed(() => ({
          total: state.total,
          current: state.page,
          pageSize: state.pageSize,
          showSizeChanger: true,
          showTotal: (total) => `共${total}条`,
        }));
          const getList = () => {
            
            let params = {
              page:state.page,
              pageSize:state.pageSize,
              keyword:state.searchTxt,
            }
            if(state.time.length){
              params.created_start_time = moment(state.time[0]).format('YYYY-MM-DD')
              params.created_end_time = moment(state.time[1]).format('YYYY-MM-DD')
            }
            state.loading = true;
          request
            .get("/work_ai", "/org/platform/account/article/list", params)
            .then((res) => {
              console.log(res,'resresres');
                state.list = res.list
                state.total = res.total
                state.loading = false;
            });
        };

        const tabChange = (tab)=>{
            state.currentTab = tab
        }
        const handleTableChange =(pager)=>{
          state.page = pager.current;
          state.pageSize = pager.pageSize;
          getList()
        }
        getList()

        const queryList = ()=>{
          state.page = 1
          getList()
        }
        const getStatus = (data)=>{
          let status = true
          let successCount = 0
          let failCount = 0
          data.map(item=>{
            if(item.status != 2){
              failCount++
              status = false
            }else{
              successCount++
            }
          })
          return {
            status,
            failCount,
            successCount
          }
        }
        const showDetail = (detail)=>{
        
            getDetail(detail.id)
            state.detailVisible = true
        }
        const getDetail = (id)=>{
          let params = {
              id
            }
           
            state.dLoading = true;
          request
            .get("/work_ai", "/org/platform/account/article/get", params)
            .then((res) => {
              console.log(res,'resresres');
               
              state.detail = res.result
                state.dLoading = false;
            });
        }
        const exportData = ()=>{
          let params = {
              // page:state.page,
              // pageSize:state.pageSize,
              keyword:state.searchTxt,
            }
            if(state.time.length){
              params.created_start_time = moment(state.time[0]).format('YYYY-MM-DD HH:mm')
              params.created_end_time = moment(state.time[1]).format('YYYY-MM-DD HH:mm')
            }

          
          request.downLoad("/work_ai", "/org/platform/account/article/export", params).then((res) => {
            console.log(res);
            let url = window.URL.createObjectURL(new Blob([res.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", res.fileName || "excel.xlsx");

            document.body.appendChild(link);
            link.click();
          }).catch(err=>{
              message.error('导出失败')
          })
          
        }
        const closeDetail = ()=>{
          state.detailVisible = false;
          state.activeKey = 1
        }
        return {
            ...toRefs(state),
            tabChange,
            handleTableChange,
            queryList,
            getStatus,
            showDetail,
            exportData,
            pagination,
            closeDetail,
        };
    },
});
</script>
  
<style lang="less" scoped>
.account-center {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: hidden auto;
 
}
  .page-center {
    margin: 0 auto;
    max-width: 1200px;
  }
  .box{
    display: flex;
  }
  .left-box{
    width: 200px;
    border-right: 1px solid #e8e8e8;
    margin-right: 20px;
  }
  .right-box{
    flex: 1;
  }
  .tab-list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .tab-item{
    width: calc(100% - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    cursor: pointer;
    border-radius: 5px;
    margin: 0 10px;
  }
  .active-tab{
    color: #938bff;
    background-color: #f7f0ff;
  }
  .ellispis{
    // 文本省略号
    width: 200px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .label-title{
    font-weight: 600;
  }
</style>
  